<template>
	<view class="content">

		<u-popup mode="center" :show="showControl" @close="showControl = false" :round="50">
			<view class="pop user-pop">
				<view class="title">
					<text>请选择管控卡</text>
				</view>
				<view class="form">
					<!-- <formArea :value="form.city" :labelWidth="134"  @onChange="(e) => form.city = e"></formArea> -->
					<view class="form-item2">
						<view class="label">管控卡名称</view>
						<view class="shape"></view>
						<view class="input">
							<u--input placeholderClass="input-placeholder" class="input-body" v-model="searchName">
							</u--input>
						</view>
					</view>
					<view class="actions">
						<view class="action" @click="searchName = controlName = ''">
							<text>重</text>
							<text>置</text>
						</view>
						<view class="action search" @click="controlName = searchName">
							<text>查</text>
							<text>询</text>
						</view>
					</view>
				</view>
				<view class="body">
					<view class="item"
						v-for="(item, idx) in controlList.filter(o => o.name.indexOf(controlName) !== -1)"
						:key="item.id" @click="handleSelectControl(item.id)">
						<view :class="`check ${selectedControl.indexOf(item.id) !== -1 ? 'check__active' : ''}`">
							<view class="check-on"></view>
						</view>
						<view class="name">{{item.name}}{{controlName}}</view>
					</view>
				</view>
				<view class="custom-button" @click="handleConfirmControl()">
					确认（{{selectedControl.length}}）
				</view>
			</view>
		</u-popup>
		<u-picker :show="showType" keyName="dict_label" :columns="typeList" closeOnClickOverlay
			@cancel="showType = false" @close="showType = false" @confirm="_setCurType"></u-picker>
		<u-datetime-picker :show="showStart" v-model="startStamp" closeOnClickOverlay mode="datetime"
			@confirm="confirmStart" @cancel="showStart = false" @close="showStart = false"></u-datetime-picker>
		<view class="section-5">
			<view class="section-bdoy"></view>
		</view>
		<!-- <view class="section-0">
			<view class="wrapper">
				<view class="label"><span style='color: red;'>*</span> 会议类型</view>
				<view class="value">
					<view class="input-2">
						<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入会议类型"
							v-model="meetinglx"></u--input>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="section-0">
			<view class="wrapper">
				<view class="title"><span style='color: red;'>*</span> 会议名称
					<view class="iconfont icon-bianji"></view>
				</view>
				<view class="value l-value">
					<view class="input">
						<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请填写会议名称..."
							v-model="meetingName"></u--input>
					</view>
				</view>
			</view>
		</view> -->
		<view class="section-0">
			<view class="wrapper">
				<view class="label"><span style='color: red;'>*</span> 会议名称</view>
				<view class="value">
					<view class="input-2">
						<u--input placeholderClass="input-placeholder" class="input-body"
							placeholder="请填写会议名称" v-model="meetingName"></u--input>
						<view class="iconfont">分钟</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-0">
			<view class="wrapper">
				<view class="label"><span style='color: red;'>*</span> 会议日期</view>
				<view class="value">
					<view class="date" @click="showStart = true">
						<view class="input-body">{{meetingData}}</view>
						<view class="iconfont icon-rili"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-0">
			<view class="wrapper">
				<view class="label"><span style='color: red;'>*</span> 会议时长</view>
				<view class="value">
					<view class="input-2">
						<u--input placeholderClass="input-placeholder" class="input-body" type="number"
							placeholder="请输入会议时长" v-model="meetingTime"></u--input>
						<view class="iconfont">分钟</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="section-0">
			<view class="wrapper wrapper-title">
				<view class="title">会议纪要<view style="color: #0535d6;" class="iconfont icon-jiahao"></view>
				</view>
				<view class="value l-value">
					<view class="textarea">
						<u--textarea :maxlength="-1" placeholderClass="textarea-placeholder" class="textarea-body"
							placeholder="输入备注内容..." v-model="meetingJy" border='null'></u--textarea>
					</view>
				</view>
			</view>
		</view> -->
		<view class="section-0">
			<view class="wrapper wrapper-title">
				<view class="title">会议内容
				</view>
				<view class="value l-value">
					<view class="textarea">
						<u--textarea :maxlength="-1" placeholderClass="textarea-placeholder" class="textarea-body"
							placeholder="输入会议内容..." v-model="meetingJy" border='null'></u--textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="section-0">
			<view class="wrapper" style=" display: flex;">
				<view class="label" >会议照片</view>
				<view class="value" >
					<view class="upload-wrap" >
						<u-upload :fileList="fileList" :previewFullImage="true"
							@afterRead="afterRead($event, 'fileList')" @delete="deleteMedia($event, 'fileList')"
							multiple :maxCount="5"
							>
						</u-upload>
					</view>
				</view>
			</view>
		</view>

		<view class="section-0">
			<view class="wrapper">
				<view class="label">现场视频</view>
				<view class="value" v-show="avshow == 2 || meetingav == '' || meetingavId == ''">
					<view class="upload-wrap">
						<u-upload accept='video' :fileList="fileVideoList" :previewFullImage="true"
							@afterRead="afterRead($event, 'fileVideoList')"
							@delete="deleteMedia($event, 'fileVideoList')" multiple :maxCount="1"
							>
							
						</u-upload>
					</view>
				</view>
				<image @click="palyVideo()" v-show="avshow == 1 && meetingav != '' && meetingavId != ''"
					style="width: 110px;height: 70px;" src="../../../../../src/imgs/bf.png" mode="">
					<view v-show="avshow == 1 && meetingav != ''&& meetingavId != ''"
						style="position: absolute;margin: -80px 0 0 45vw; color: red;" @click="avdel()">x</view>
				</image>
			</view>
		</view>
		<view class="section-0" v-show="audioshow == 2 || meetingAudio == '' || meetingAudioId == '' || meetingAudio == null">
			<view class="wrapper">
				<view class="label">现场录音</view>
				<view class="value">
					<view class="audio" @click="handleRecord()">
						<view :class="`audio-center ${recordStatus === 'on'? 'audio-center__on' : ''} ${recordStatus === 'fin'? 'audio-center__fin' : ''}`">
						</view>
					</view>
					<view class="fin-tips" v-if="recordStatus === 'fin'">录音文件已上传</view>
					<view class="time">{{timecount}}</view>
				</view>
			</view>
		</view>



		<view class="record1" v-show="audioshow == 1 && meetingAudio != ''&& meetingAudio != null && meetingAudioId != ''">
			<view class="audio" @click="playAudio(meetingAudio)">
				<view class="audio-control">
					<text class="iconfont icon-24gf-play" v-if="audioState === 2 || audioState === 0"></text>
					<text class="iconfont icon-24gf-pause2" v-if="audioState === 1"></text>
				</view>
			</view>
			<view class="audio audio-stop" @click="stop()">
				<view class="audio-center"></view>
			</view>
			<view class="slide">
				<u-slider @change="stepAudio" v-model="audioCurrentTime" :min='0' :max='audioDuration.toFixed(0)'>
				</u-slider>
			</view>
			<view class="time">{{Math.round(audioCurrentTime)}}s</view>
			<view class="time" @click="audiodel()" style="color: red;">x</view>
		</view>



		<view class="section-1" @click="showControl = true">
			<view class="label">关联管控卡</view>
			<view class="name">{{project_manage_name}}</view>
			<view class="iconfont icon-wode-bangdingguanxi"></view>

		</view>
		<view class="footer-space"></view>
		<view class="footer">
			<view class="submit" @click="editMeeting()">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	let innerAudioContext1 = '';
	import {
		mapGetters
	} from 'vuex';
	import {
		addMeeting,
		detailsApi,
		editMeeting
	} from '@/api/meeting.js';
	import { uploadUrl } from '@/baseUrl.js';
	import {
		typeSearchApi
	} from '@/api/statistics.js';
	var recordObj = '';
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				picstatus:'',//图片状态
				avstatus:'',//视频状态
				audiostatus:'',//音屏状态
				audioshow: 1,
				avshow: 1,
				audioState: 0,
				audioDuration: 10,
				audioCurrentTime: 0,
				project_id: '',
				// meetinglx: '', //会议类型
				meetingName: '', //会议名称
				meetingData: '', //会议日期
				meetingTime: '', //会议时长
				meetingJy: '', //会议纪要
				meetingav: '', //会议视频
				meetingavId: '', //会议id
				meetingAudio: '', //会议音屏
				meetingAudioId: '', //会议音屏id
				meetingMangeId: '', //管控卡id
				nick_name: '',
				show: '',
				meetingId: '', //会议id
				curName: '发起会议',
				curIdx: 0,
				tabList: [{
						name: '发起会议'
					},
					{
						name: '整理会议'
					},
				],
				searchName: '',
				controlName: '',
				selectedControl: [],
				timecount: '00:00:00',
				hour: 0,
				minute: 0,
				second: 0,
				timer1: '',
				isZant: false,
				gotime: 0,
				typeList: [
					[{
							"dict_code": 283,
							"dict_label": "例会",
							"dict_value": "1"
						},
						{
							"dict_code": 284,
							"dict_label": "站班会",
							"dict_value": "2"
						},
						{
							"dict_code": 285,
							"dict_label": "安委会",
							"dict_value": "3"
						},
						{
							"dict_code": 286,
							"dict_label": "启委会",
							"dict_value": "5"
						},
						{
							"dict_code": 287,
							"dict_label": "协调会",
							"dict_value": "6"
						},
						{
							"dict_code": 412,
							"dict_label": "第一次工地例会",
							"dict_value": "7"
						}
					]
				],
				curType: '例会',
				memo: '',
				name: '',
				showType: false,
				start: '',
				startStamp: Number(new Date()),
				showStart: false,
				fileList: [],
				fileVideoList: [],
				form: {
					meeting_name: '',
					meeting_type: '',
					meeting_time: '',
					meet_file_content: '',
					meeting_file_id: '',
					meeting_av_id: '',
					meeting_audio_id: '',
					project_manage_id: '',
					meeting_duration: ''
				},
				curValue: '',
				recordStatus: 'off',
				loading: false,
				timer: null,
				showControl: false,
				project_manage_id: '',
				project_manage_name: '',
				controlList: [],
				meeting_duration: '',
				meetingList: [],
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				userInfo: 'system/getUserInfo'
			})
		},
		onLoad(e) {
			this.meetingId = e.meetingId
			this.project_id = e.project_id
			this.show = e.show
			this.detailsApi()
			recordObj = plus.audio.getRecorder();

		},
		onUnload() {
			if (this.timer1) {
				clearTimeout(this.timer1);
				this.timer1 = '';
			}
		},
		onReady() {
			this.nick_name = this.userInfo.nick_name
			this.typeSearch();
		},
		beforeDestroy() {
			clearInterval(this.timer);
			this.timer = null;
			if (innerAudioContext1) {
				this.stop();
			}
		},

		methods: {
			previewImage(url) {
				var arr = [];
				arr.push(url);
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: arr //预览图片的地址，必须要数组形式
				})
			},
			palyVideo() {
				if(this.avstatus == 200){　
					this.meetingav = this.meetingav
				}
				uni.navigateTo({
					url: '/pages/common/video_player/index?url=' + this.meetingav
				})
			},
			async editMeeting() {
				if(this.meetingName == '' || this.meetingData == '' || this.meetingTime == ''){
					uni.showModal({
						title: '提示',
						content: '带*号为必填项,请注意填写完整',
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						// cancelColor: '#39B54A',
						success: (res) => {
							if(res.confirm) {  
								
							} else {  
								
							}  
						} 
					})
					return
					// uni.showToast({
					// 	title:'请输入会议名称',
					// 	icon:'none',
					// 	duration:1000
					// })
					// return
				}
				uni.showLoading({
					mask: true
				})
				if(this.avshow == 2 && this.avstatus != 200){
					
					this.meetingavId = ''
				}else if(this.avstatus == 200){
					this.meetingavId = this.meetingavId
				}
				if(this.audioshow == 2 && this.audiostatus != 1 ){
					this.meetingAudioId = ''
				}else if(this.audiostatus == 1){
					this.meetingAudioId = this.meetingAudioId
				}
				let obj = {}
				
				obj.meeting_file_id =  this.fileList[0]? this.fileList.map((obj)=>{
					  return  obj.file_id
					}).join(","):''
				
					obj.id= this.meetingId,
					obj.project_id= this.project_id,
					obj.meeting_type= this.meetinglx,
					obj.meeting_name= this.meetingName,
					obj.meeting_time= this.meetingData,
					obj.meeting_duration= this.meetingTime,
					obj.meet_file_content= this.meetingJy,
					obj.meeting_av_id= this.meetingavId,
					obj.meeting_audio_id= this.meetingAudioId,
					obj.project_manage_id= this.meetingMangeId
				let j = await editMeeting({...obj})
				
				if (j.data.code == 1) {
					uni.setStorageSync('meetingId', this.meetingId)
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000
					})
					// let meetingId = this.meetingId
					setTimeout(function() {
						uni.navigateBack()
					}, 1000);
				}
				uni.hideLoading()

			},
			audiodel() {
				this.audioshow = 2
			},
			avdel() {
				this.avshow = 2
			},
			onHide() {
				if (innerAudioContext1) {
					this.stop();
				}
			},
			playAudio(url) {
				if (this.audioState === 0) {
					innerAudioContext1 = uni.createInnerAudioContext();
					innerAudioContext1.autoplay = true;
					innerAudioContext1.src = url;
					innerAudioContext1.onPlay(() => {})
					innerAudioContext1.onError((res) => {
					});
					innerAudioContext1.onTimeUpdate(() => {
						if (!Number.isFinite(innerAudioContext1.duration)) {
							innerAudioContext1.currentTime = Number.MAX_SAFE_INTEGER;
							innerAudioContext1.currentTime = 0;
						} else {
							this.audioDuration = innerAudioContext1.duration;
							this.audioCurrentTime = innerAudioContext1.currentTime;
						}
					})
					this.audioState = 1;
				} else if (this.audioState === 1) {
					this.pause()
					this.audioState = 2;
				} else if (this.audioState === 2) {
					this.play()
					this.audioState = 1;
				}
			},
			stepAudio(e) {
				let paused = innerAudioContext1.paused;
				innerAudioContext1.pause();
				innerAudioContext1.seek(e)
				if (!paused) {
					innerAudioContext1.play();
				}
			},
			play() {
				innerAudioContext1.play();
			},
			pause() {
				innerAudioContext1.pause();
			},
			stop() {
				innerAudioContext1.stop();
				this.audioState = 2;
			},

			async detailsApi() {
				uni.showLoading({
					mask: true
				})
				let j = await detailsApi({
					id: this.meetingId
				})
				if (j.data.code == 1) {
					this.meetinglx = j.data.data.meeting_type
					this.meetingName = j.data.data.meeting_name
					this.meetingData = j.data.data.meeting_time
					this.meetingTime = j.data.data.meeting_duration
					this.meetingJy = j.data.data.meet_file_content
					this.meetingav = j.data.data.meeting_av_path
					this.meetingavId = j.data.data.meeting_av_id
					this.meetingAudio = j.data.data.meeting_audio_path
					this.meetingAudioId = j.data.data.meeting_audio_id
					this.project_manage_name = j.data.data.gkk_name
					this.meetingMangeId = j.data.data.project_manage_id
					this.fileList=[]
					var lala=j.data.data.meeting_file_id.split(',')
					for(var i=0;i<j.data.data.meeting_file_path.length;i++){
						var obj={}
						obj.url=j.data.data.meeting_file_path[i]
						obj.file_path=j.data.data.meeting_file_path[i]
						for(var k=0;k<lala.length;k++){
							if(i==k){
								obj.file_id=lala[k]
								this.fileList.push(obj)
							}
						}
					}
				}
				uni.hideLoading()
			},
			setCurIdx(idx, name) {
				this.curIdx = idx;
				this.curName = name;
				if (name == '整理会议') {
					uni.navigateTo({
						url: '/pages/statistics/comprehensive/duty/meeting/list/index?show=1' + '&nick_name=' +
							this.nick_name
					})
				}
			},
			handleSelectControl(id) {
				const index = this.selectedControl.indexOf(id);
				if (index === -1) {
					this.selectedControl.push(id);
				} else {
					this.selectedControl.splice(index, 1);
				}
			},
			handleConfirmControl() {
				this.project_manage_id = this.selectedControl.join(',');
				this.meetingMangeId = this.project_manage_id
				this.project_manage_name = this.controlList.filter(item => this.selectedControl.indexOf(item.id) !== -1)
					.map(item => item.name).join(',');
				this.showControl = false;
			},
			// 点击开始录音就开始计时
			getTimeInterval() {
				if (this.timer1) {
					clearInterval(this.timer1);
					return;
				}
				this.timer1 = setInterval(() => {
					this.second += 1;
					if (this.second >= 60) {
						this.minute += 1;
						this.second = 0;
					}
					if (this.minute >= 60 && this.second >= 60) {
						this.minute += 0;
						this.hour += 1;
					}
					this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this
						.showNum(this.second);
				}, 1000);

			},
			showNum(num) {
				if (num < 10) {
					return '0' + num
				}
				return num
			},


			go() {
				const params = {
					type: 'history',
					user_name: this.userInfo.nick_name,
				}
				uni.navigateTo({
					url: '/pages/statistics/comprehensive/duty/meeting/list/index?params=' + JSON.stringify(params)
				})
			},
			handleRecord() {
				// this.timecount = '00:00:00';
				// this.hour = 0;
				// this.minute = 0;
				// this.second = 0;
				if (this.recordStatus === 'fin') {
					return;
				} else if (this.recordStatus === 'off') {
					this.recordStatus = 'on';
					this.getTimeInterval()
					this.startRecord();
				} else if (this.recordStatus === 'on') {
					this.recordStatus = 'fin';
					this.gotime == 1
					this.getTimeInterval()
					this.endRecord();
				}
			},
			startRecord() {
				let _this = this;
				recordObj.record({
					filename: "_doc/audio/"
				}, async (url) => {
					_this.loading = true;
					uni.showLoading({
						title: '上传中...'
					});
					const result = await this.uploadFilePromise2(url)
					_this.audiostatus = result.code
					// _this.meeting_audio_id = result.data.file_id;
					_this.meetingAudio = result.data.file_path;
					_this.meetingAudioId = result.data.file_id;
					uni.hideLoading();
					_this.loading = false;
				}, (e) => {
					uni.showToast({
						title: '请检查权限',
						duration: 1000,
						icon: 'none'
					});
				});
			},
			endRecord() {
				recordObj.stop();
			},
			async typeSearch(obj) {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data
				} = await typeSearchApi({
					type: '会议',
					project_id: this.curProject.id
				});
				uni.hideLoading();
				if (data.code == 1) {
					let arr = data.data.map(item => ({
						...item,
						name: item.name.substring(3, item.name.length)
					}))
					this.controlList = arr;
				}
			},
			// 删除
			deleteMedia(event, type) {
				this[type].splice(event.index, 1)
			},
			// 新增
			async afterRead(event, type) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[type].length
				lists.map((item) => {
					this[type].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					if (type == 'fileVideoList') {
						uni.showLoading({
							title: '视频压缩中...'
						})
						uni.getVideoInfo({
							src: lists[i].url,
							success: async (res) => {
							},
							fail: async (res) => {
							}
						})
						uni.compressVideo({
							src: lists[i].url,
							quality: 'low',
							// resolution: 0.6,
							// fps: 23,
							// bitrate: 350,
							success: async (res) => {
								const filePath = res.tempFilePath;
								const result = await this.uploadFilePromise(filePath)
								let item = this[type][fileListLen]
								this[type].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									file_id: result.data.file_id
								}))
								fileListLen++
							},
							fail: async (res) => {
								const result = await this.uploadFilePromise(lists[i].url)
								let item = this[type][fileListLen]
								this[type].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									file_id: result.data.file_id
								}))
								fileListLen++
							},
							complete(res, ) {
								uni.hideLoading();
							}
						})
					} else {
						const result = await this.uploadFilePromise1(lists[i].url)
						let item = this[type][fileListLen]
						this[type].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							file_id: result.data.file_id
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise1(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							this.picstatus = res.statusCode
							resolve(JSON.parse(res.data))
						},
						fail(res) {
						}
					});
				})
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							this.avstatus = res.statusCode
							this.avshow = 2
							
							this.meetingav = JSON.parse(res.data).data.file_path
							this.meetingavId = JSON.parse(res.data).data.file_id
							resolve(JSON.parse(res.data))
						},
						fail(res) {
						}
					});
				})
			},
			
			uploadFilePromise2(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data))
						},
						fail(res) {
						}
					});
				})
			},
			
			
			
			
			_setCurType(e) {
				this.curType = e.value[0].dict_label;
				this.curValue = e.value[0].dict_code;
				this.showType = false;
			},
			_setControl(e) {
				this.project_manage_id = e.value[0].id;
				this.project_manage_name = e.value[0].name;
				this.showControl = false;
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				const h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ':';
				const s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			confirmStart(val) {
				const timeStamp = val.value;
				this.start = this.formatDate(timeStamp);
				this.meetingData = this.start
				this.showStart = false;
				this.form.meeting_time = this.start;
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-picker-view-content>* {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 10rpx;
		width: calc(100% - 20rpx);
	}




	.section-4 {
		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;

			.tab {

				width: 100%;
				height: 80rpx;
				@include clear();
				background-color: #1534ce;

				.item {
					width: 50%;
					float: left;
					height: 80rpx;
					background-color: #1534ce;
					position: relative;

					.label {
						height: 80rpx;
						line-height: 80rpx;
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						text-align: center;
						width: 100%;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
					}

					.shape {
						z-index: 1;
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -50rpx;
						background: #000;
						display: none;
						background-color: #fff;
						overflow: hidden;

						.shape-body {
							width: 50rpx;
							height: 50rpx;
							background-color: #1534ce;
							border-bottom-right-radius: 40rpx;
						}
					}

					.shape-mirrow {
						z-index: 1;
						left: 0;
						display: none;

						.shape-body {
							border-bottom-right-radius: 0rpx;
							border-bottom-left-radius: 40rpx;
						}
					}
				}

				.item__active {
					border-top-left-radius: 40rpx;
					border-top-right-radius: 40rpx;
					background-color: #fff;

					.label {
						color: #46464a;
					}

					.shape {
						display: block;
					}

					.shape-mirrow {
						display: none;
					}
				}

				.item__active_next {
					border-bottom-right-radius: 50rpx;

					.shape {
						display: none;
					}

					.shape-mirrow {
						display: block;
					}
				}

			}
		}
	}






	.section-5 {
		width: 100%;
		background-color: #2c5cff;

		.section-bdoy {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			width: 100%;
			height: 50rpx;
		}
	}

	.footer-space {
		height: 150rpx;
	}

	.footer {
		width: 100%;
		z-index: 8;
		height: 150rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);

		.record {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.icon-lishijilu_huaban {
				font-size: 43rpx;
				color: #3b3c40;
			}

			text {
				font-size: 26rpx;
				color: #3b3c40;
				margin-top: 10rpx;
			}
		}

		.submit {
			width: 287rpx;
			height: 83rpx;
			background-color: #1534ce;
			border-radius: 20rpx;
			letter-spacing: 14rpx;
			color: #ffffff;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.section-1 {
		width: 670rpx;
		margin-left: 40rpx;
		height: 100rpx;
		background-color: #0535d6;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(51, 91, 222, 0.42);
		border-radius: 35rpx;
		margin-bottom: 90rpx;
		overflow: hidden;
		line-height: 100rpx;

		.label {
			float: left;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			line-height: 100rpx;
			letter-spacing: 0rpx;
			margin-left: 40rpx;
			color: #ffffff;
		}

		.name {
			overflow: hidden;
			float: left;
			width: 300rpx;
			line-height: 100rpx;
			font-size: 26rpx;
			color: #ffffff;
			margin-left: 24rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.iconfont {
			margin-right: 70rpx;
			font-size: 42rpx;
			color: #fff;
			float: right;
		}
	}

	.content {
		.wrapper {
			width: 670rpx;
			margin-left: 40rpx;
			border-radius: 35rpx;
			background-size: cover;
			background-repeat: no-repeat;
			overflow: hidden;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			padding: 28rpx 40rpx;

			.label {
				width: 135rpx;
				float: left;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				height: 48rpx;
				line-height: 48rpx;
				letter-spacing: 0px;
				color: #46464a;
			}

			.title {
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				border-bottom: solid 3rpx #f2f2f0;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #46464a;
				padding-bottom: 28rpx;

				.iconfont {
					float: right;
					font-size: 30rpx;
					color: #46464a;
				}
			}

			.value {
				float: left;
				width: 445rpx;

				.input-2 {
					width: 100%;
					height: 52rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 52rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					box-sizing: border-box;
					// padding-left: 20rpx;
					text-align: center;
					color: #0535d6;
					padding-right: 50rpx;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.iconfont {
						top: 0;
						position: absolute;
						right: 25rpx;
						line-height: 50rpx;
						color: #1534ce;
						font-size: 28rpx;
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}

				.audio {
					width: 50rpx;
					height: 50rpx;
					background-color: #ffffff;
					border-radius: 50%;
					box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
					overflow: hidden;

					float: left;

					.audio-center {
						margin-top: 13rpx;
						margin-left: 13rpx;
						border-radius: 50%;
						width: 24rpx;
						height: 24rpx;
						background-color: #ed451b;
					}

					.audio-center__on {
						animation: scale 2s infinite;
					}

					.audio-center__fin {
						background-color: rgba(0, 0, 0, 0.5);
						;
					}

					@keyframes scale {
						0% {
							transform: scale(1);
							opacity: 1;
						}

						50% {
							transform: scale(1.5);
							opacity: 0.5;
						}

						100% {
							transform: scale(1);
							opacity: 1;
						}
					}
				}

				.fin-tips {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 22rpx;
					color: rgba(0, 0, 0, 0.5);
					float: left;
					margin-left: 20rpx;
				}

				.time {
					position: absolute;
					right: 100rpx;
				}

				.upload-wrap {
					width: 100%;
					min-height: 48rpx;
					border-radius: 20rpx;
					// border: solid 2rpx #0535d6;
					position: relative;

					.file_name {
						padding: 9rpx 0;
						line-height: 30rpx;
						color: #1534ce;
						font-size: 26rpx;
						word-break: break-all;
					}

					.iconfont {
						position: absolute;
						right: 25rpx;
						line-height: 48rpx;
						color: #1534ce;
						font-size: 28rpx;
						top: 2rpx;
					}
				}

				.date {
					width: 100%;
					height: 52rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 48rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					box-sizing: border-box;
					// padding-left: 20rpx;
					text-align: center;
					color: #0535d6;
					padding-right: 50rpx;

					.iconfont {
						position: absolute;
						right: 25rpx;
						top: 0rpx;
						font-size: 30rpx;
						color: #0535d6;
					}
				}

				.picker {
					width: 100%;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 44rpx;

					text {
						font-size: 26rpx;
						letter-spacing: 0rpx;
						color: #46464a;
						margin-left: 28rpx;
					}

					.iconfont {
						float: right;
						font-size: 32rpx;
					}
				}

				.input {
					padding-top: 18rpx;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						line-height: 44rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}

				.textarea {
					width: 100%;
					height: 200rpx;
					line-height: 30rpx;

					.textarea-body {
						box-sizing: border-box;
						width: 100%;
						height: 200rpx;
						border: none;
						padding: 18rpx 0rpx !important;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;

						/deep/ .u-textarea__field {
							height: auto !important;
							font-size: 25rpx;
						}
					}

					/deep/ .u-textarea--disabled {
						background-color: #fff;
					}

					.textarea-placeholder {
						font-size: 25rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 50rpx;
						letter-spacing: 3rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.l-value {
				width: 100%;
			}
		}

		.section-0 {
			margin-bottom: 24rpx;

		}


		.record1 {
			display: flex;
			z-index: 1;
			padding-bottom: 20px;
			width: 90%;
			margin-left: 5%;
			@include clear();

			.audio {
				width: 50rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 50%;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				overflow: hidden;
				margin-right: 50rpx;
				float: left;

				.audio-center {
					margin-top: 13rpx;
					margin-left: 13rpx;
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					background-color: #ed451b;
				}

				.audio-control {
					width: 100%;
					height: 100%;
					position: relative;

					text {
						width: 30rpx;
						height: 30rpx;
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						font-size: 30rpx;
						color: #ed451b;
					}
				}

				.audio-center__on {
					animation: scale 2s infinite;
				}

				.audio-center__fin {
					background-color: rgba(0, 0, 0, 0.5);
					;
				}

				@keyframes scale {
					0% {
						transform: scale(1);
						opacity: 1;
					}

					50% {
						transform: scale(1.5);
						opacity: 0.5;
					}

					100% {
						transform: scale(1);
						opacity: 1;
					}
				}
			}

			.audio-stop {
				.audio-center {
					border-radius: 5rpx;
					background-color: #333;
				}
			}

			.slide {
				float: left;
				width: calc(100% - 280rpx);
				padding-top: calc((50rpx - 18px) / 2);

				/deep/ uni-slider {
					margin: 0;
				}
			}

			.time {
				width: 80rpx;
				float: left;
				height: 50rpx;
				line-height: 50rpx;
				text-align: right;
				@include font-normal();
			}
		}

	}

	.pop {
		width: 671rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 35rpx;
		overflow: hidden;

		.title {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1534ce;
			font-size: 42rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 4rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.user-pop {
		.form {
			width: 100%;
			padding: 0 40rpx;
			padding-top: 0rpx;
			box-sizing: border-box;
			position: relative;

			.area-container {
				position: absolute;
				top: 110rpx;
				left: 75rpx;
				z-index: 10;
				width: 600rpx;
				background-color: #1433cd;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 24rpx;
				padding-bottom: 12rpx;

				&::before {
					position: absolute;
					top: -12rpx;
					left: 32rpx;
					content: '';
					border-bottom: 12rpx solid #1433cd;
					border-left: 12rpx solid transparent;
					;
					border-right: 12rpx solid transparent;
				}

				.item {
					padding: 0 18rpx;
					height: 44rpx;
					background-color: #fafbfd;
					border-radius: 20rpx;
					margin-bottom: 12rpx;
					color: #1433cd;
					font-size: 26rpx;
					text-align: center;
					line-height: 44rpx;
					float: left;
					margin-right: 12rpx;
				}

				.item__active {
					background-color: orange;
					color: #fff;
				}

			}

			.form-item2 {
				width: 100%;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-top: 10px;
				margin-bottom: 30rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: calc(100% - 134rpx - 3rpx);

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}

			}

			.actions {
				width: 100%;
				height: 50rpx;
				margin-top: 29rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;

				.action {
					width: 288rpx;
					height: 48rpx;
					background-color: #395cf5;
					border-radius: 20rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					color: #ffffff;

					text {
						&:first-child {
							margin-right: 20rpx;
						}
					}
				}

				.search {
					background-color: #1534ce;
				}
			}

			.form-item {
				width: 600rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 34rpx;
				@include clear();

				.label {
					float: left;
					width: 77rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: calc(100% - 77rpx - 80rpx - 3rpx);

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #1534ce;
						text-align: center;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.action {
					float: left;
					width: 80rpx;
					line-height: 44rpx;
					height: 44rpx;
					text-align: center;
					font-size: 32rpx;
					color: #1534ce;
					transition: 0.3s ease;
				}

				.action__active {
					transform: rotate(180deg);
				}
			}

			.size2 {
				.label {
					width: 77rpx;
				}

				.input {
					width: calc(100% - 77rpx - 3rpx);
					position: relative;

					.iconfont {
						position: absolute;
						right: 25rpx;
						top: 7rpx;
						font-size: 30rpx;
						color: #dad9df;
					}
				}
			}


		}

		.body {
			padding: 0rpx 50rpx;
			@include clear;
			max-height: 50vh;
			margin-bottom: 40rpx;
			overflow-y: auto;

			.form-item {


				width: 600rpx;
				height: 48rpx;
				line-height: 48rpx;
				margin: 0 auto;
				margin-bottom: 25rpx;
				display: flex;
				align-items: center;

				&:last-child {
					margin-bottom: 34rpx;
				}

				&.upload-wrap {
					align-items: unset;
					height: unset;
					line-height: unset;
				}

				@include clear();

				.label {
					float: left;
					width: 130rpx;
					height: 48rpx;
					text-align: left;
					line-height: 44rpx;
					font-size: 26rpx;
					color: #46464a;
				}

				/deep/ .u-upload__wrap {
					// width: calc(100% - 206rpx) !important;
					width: calc(100%) !important;
					background-color: transparent;
				}

				.icon-tupian {
					position: absolute;
					right: 25rpx;
					line-height: 44rpx;
					color: #1534ce;
					font-size: 28rpx;
				}

				/deep/ .u-radio-label--left {
					margin-right: 55rpx;
				}

				/deep/ .u-radio__text {
					font-size: 26rpx !important;
					color: #46464a !important;
				}

				.input {
					float: left;
					width: calc(100% - 134rpx - 3rpx);
					border-radius: 20rpx;
					border: solid 2rpx #1534ce;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}


			}

			.item {
				width: auto;
				height: 60rpx;
				@include clear();

				.check {
					width: 24rpx;
					height: 24rpx;
					border: solid 1rpx #000000;
					border-radius: 50%;
					float: left;
					margin-top: 16rpx;
					position: relative;

					.check-on {
						transition: 0.3s ease;
						opacity: 0;
						transform: scale(0.5);
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 18rpx;
						height: 18rpx;
						background-color: #000000;
					}
				}

				.name {
					float: left;
					width: calc(100% - 24rpx - 40rpx);
					font-size: 26rpx;
					font-weight: 300;
					padding: 15rpx 0;
					font-stretch: normal;
					line-height: 30rpx;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #000000;
					margin-left: 20rpx;
				}

				.check__active {
					.check-on {
						opacity: 1;
						transform: scale(1);
					}
				}
			}
		}

	}
	.images{
		
		width: 100px ;
		margin-right: 20rpx;
		height:  100px;
		margin-bottom: 20rpx;
		image{
			width: 100px ;
			height: 100px;
		}
	}
</style>
